<template>
  <div>
    <el-dialog
      :visible.sync="showBlogForm"
      :title="title ? '投注用户编辑':'新增投注用户'"
      custom-class="mini-dialog dialog-style" :close-on-click-modal="false"
      @closed="closeForm">
      <!--label-width="80px" 依照標題字數去設-->
      <el-form :model="ruleForm" :rules="rules" class="form" size="small" ref="ruleForm" label-width="70px" label-position="top">
      <!-- 禁止自动填入密码 -->
        <el-form-item label="用户账号" prop="account" >
          <el-input v-model="ruleForm.account"  placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password" >
          <el-input v-model="ruleForm.password"  placeholder="请输用户密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm" size="mini">取 消</el-button>
        <el-button :disabled="submitLoading" type="primary" size="mini" @click="submitForm('ruleForm')" :loading="submitLoading"> 确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import Api from '@/api/sys'
import Api from '@/api/users'
// import md5 from 'js-md5/build/md5.min'
const defaultOptions = {
  password: '',
  account: ''
}
export default {
  data () {
    // 校验规则
    return {
      // =============================
      showBlogForm: false,
      title: false,
      loading: false,
      submitLoading: false,
      ruleForm: {...defaultOptions},
      // 校验方法
      rules: {
        account: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      isDisable: false
    }
  },
  props: {
    visible: Boolean,
    data: Object,
    types: {
      type: String,
      default: ''
    }
  },
  computed: {
    screenW () {
      return 1024
    }
  },
  mounted () {
  },
  methods: {
    closeForm () {
      this.resetForm('ruleForm')
      this.$emit('onClose')
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 提交表单信息
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return
        }
        let submitData = {
          password: this.ruleForm.password,
          account: this.ruleForm.account
        }
        Api.addManager(submitData).then((res) => {
          this.submitLoading = false
          if (res.code === 200) {
            this.msgSuccess('保存成功')
            this.showBlogForm = false
            this.$parent.ruleForm = {}
            this.$parent.getList()
          }
        })
      })
    }
  },
  watch: {
    visible (nv) {
      this.showBlogForm = nv
      if (nv) {
        this.ruleForm = {
          id: this.data.id,
          password: this.data.password,
          account: this.data.userAccount
        }
      }
    }
  }
}
</script>
<style scoped>
  .button-right{
    position: absolute;
    right: 0;
    bottom: 100%;
  }
</style>
